<template>
	<view class="container">
		<view class="tui-dot" :class="['tui-dot-'+(index+1)]" v-for="(item,index) in circleList" :key="index"></view>
		<view class="tui-container-in">
			<view class="tui-content-out" :class="['tui-award-'+(index+1),index==indexSelect?'tui-awardSelect':'']" v-for="(item,index) in awardList"
			 :key="index">
				<view class="tui-content-out-item" :class="[index==indexSelect?'tui-awardSelect-item':'']">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/integral-redpack.png"></image>
					<text>神秘红包</text>
				</view>
			</view>
			<view class="tui-btn-start" :class="[isRunning?'tui-ative':'']" @tap="startDrawing">
				<text>消耗{{consumeNum}}积分</text>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/integral-btn2.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否正在抽奖
			isRunning: {
				type: Boolean,
				default: false
			},
			// 商铺id
			businessId: {
				type: String,
				default: ''
			},
			// 剩余抽奖次数
			residueNum: {
				type: Number,
				default: 0
			},
			// 单次使用多少积分
			consumeNum: {
				type: Number,
				default: 0
			},
			// 剩余积分
			userIntegral: {
				type: Number,
				default: 0
			},
			// 剩余红包数
			residueNumber: {
				type: Number,
				default: 0
			},

		},
		data() {
			return {
				circleList: 44, //圆点
				awardList: [{}, {}, {}, {}, {}, {}, {}, {}],
				indexSelect: 0
			}
		},
		methods: {
			//获取随机数
			getRandom: function(u) {
				let rnd = Math.random() > 0.5 ? "2" : "1";
				u = u || 3;
				for (var i = 0; i < u; i++) {
					rnd += Math.floor(Math.random() * 10);
				}
				return Number(rnd);
			},
			//开始抽奖
			startDrawing: function() {
				var that = this
				if (this.isRunning) return
				if (this.residueNum == 0) {
					uni.showModal({
						content: '今日抽奖次数已用光，明天再来吧~',
						showCancel: false
					})
					return
				}
				if (this.userIntegral < this.consumeNum) {
					uni.showModal({
						content: '您的积分不足，快去店铺消费吧~',
						showCancel: false
					})
					return
				}
				if (this.residueNumber == 0) {
					uni.showModal({
						content: '商家设置的红包被抽光了，明天再来吧~',
						showCancel: false
					})
					return
				}
				this.$emit('callBackRunning', true)
				let indexSelect = 0;
				let i = 0;
				let randomNum = this.getRandom(3);
				this.$request({
					url: '/RedPacketDataLog/take_red_packet',
					data: {
						business_id: that.businessId
					},
					success: res => {
						if (res.data.status == 1) {
							let timer = setInterval(() => {
								++indexSelect;
								//这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
								indexSelect = indexSelect % 8;
								that.indexSelect = indexSelect;
								i += 50;
								if (i > randomNum) {
									//去除循环
									clearInterval(timer)
									timer = null;
									//获奖提示
									// 获奖结果 result
									var result = {}
									that.$emit('result', res.data.data)
								}
							}, (70 + i))
						}
						uni.hideLoading()
					},
					fail: (error) => {
						that.$emit('callBackRunning', false)
					},
					complete: () => {}
				});

			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/integral-draw.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 40upx;
		position: relative;
	}

	.tui-container-in {
		width: 640upx;
		height: 630upx;
		background-color: #f25c46;
		position: absolute;
		left: 30rpx;
		top: 32rpx;
		border: solid 1rpx #fe8826;
		border-radius: 16upx;
	}

	/**小圆点 start*/

	.tui-dot {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 12upx;
		width: 12upx;
	}

	.tui-dot:nth-child(odd) {
		background: #fff;
		animation: 0.5s odd linear infinite;
	}

	.tui-dot:nth-child(even) {
		background: #F8990B;
		animation: 0.5s even linear infinite;
	}

	.tui-dot-1 {
		left: 50upx;
		top: 6upx;
	}

	.tui-dot-2 {
		left: 110upx;
		top: 6upx;
	}

	.tui-dot-3 {
		left: 170upx;
		top: 6upx;
	}

	.tui-dot-4 {
		left: 230upx;
		top: 6upx;
	}

	.tui-dot-5 {
		left: 290upx;
		top: 6upx;
	}

	.tui-dot-6 {
		left: 350upx;
		top: 6upx;
	}

	.tui-dot-7 {
		left: 410upx;
		top: 6upx;
	}

	.tui-dot-8 {
		left: 470upx;
		top: 6upx;
	}

	.tui-dot-9 {
		left: 530upx;
		top: 6upx;
	}

	.tui-dot-10 {
		left: 590upx;
		top: 6upx;
	}

	.tui-dot-11 {
		left: 650upx;
		top: 6upx;
	}

	.tui-dot-12 {
		left: 50upx;
		bottom: 14upx;
	}

	.tui-dot-13 {
		left: 110upx;
		bottom: 14upx;
	}

	.tui-dot-14 {
		left: 170upx;
		bottom: 14upx;
	}

	.tui-dot-15 {
		left: 230upx;
		bottom: 14upx;
	}

	.tui-dot-16 {
		left: 290upx;
		bottom: 14upx;
	}

	.tui-dot-17 {
		left: 350upx;
		bottom: 14upx;
	}

	.tui-dot-18 {
		left: 410upx;
		bottom: 14upx;
	}

	.tui-dot-19 {
		left: 470upx;
		bottom: 14upx;
	}

	.tui-dot-20 {
		left: 530upx;
		bottom: 14upx;
	}

	.tui-dot-21 {
		left: 590upx;
		bottom: 14upx;
	}

	.tui-dot-22 {
		left: 650upx;
		bottom: 14upx;
	}

	.tui-dot-23 {
		top: 50upx;
		left: 6upx;
	}

	.tui-dot-24 {
		top: 110upx;
		left: 6upx;
	}

	.tui-dot-25 {
		top: 170upx;
		left: 6upx;
	}

	.tui-dot-26 {
		top: 230upx;
		left: 6upx;
	}

	.tui-dot-27 {
		top: 290upx;
		left: 6upx;
	}

	.tui-dot-28 {
		top: 350upx;
		left: 6upx;
	}

	.tui-dot-29 {
		top: 410upx;
		left: 6upx;
	}

	.tui-dot-30 {
		top: 470upx;
		left: 6upx;
	}

	.tui-dot-31 {
		top: 530upx;
		left: 6upx;
	}

	.tui-dot-32 {
		top: 590upx;
		left: 6upx;
	}

	.tui-dot-33 {
		top: 650upx;
		left: 6upx;
	}


	.tui-dot-34 {
		top: 50upx;
		right: 6upx;
	}

	.tui-dot-35 {
		top: 110upx;
		right: 6upx;
	}

	.tui-dot-36 {
		top: 170upx;
		right: 6upx;
	}

	.tui-dot-37 {
		top: 230upx;
		right: 6upx;
	}

	.tui-dot-38 {
		top: 290upx;
		right: 6upx;
	}

	.tui-dot-39 {
		top: 350upx;
		right: 6upx;
	}

	.tui-dot-40 {
		top: 410upx;
		right: 6upx;
	}

	.tui-dot-41 {
		top: 470upx;
		right: 6upx;
	}

	.tui-dot-42 {
		top: 530upx;
		right: 6upx;
	}

	.tui-dot-43 {
		top: 590upx;
		right: 6upx;
	}

	.tui-dot-44 {
		top: 650upx;
		right: 6upx;
	}

	@-webkit-keyframes odd {
		0% {
			background: #fff;
		}

		100% {
			background: #fcf400;
		}
	}

	@keyframes odd {
		0% {
			background: #fff;
		}

		100% {
			background: #fcf400;
		}
	}

	@-webkit-keyframes even {
		0% {
			background: #fcf400;
		}

		100% {
			background: #fff;
		}
	}

	@keyframes even {
		0% {
			background: #fcf400;
		}

		100% {
			background: #fff;
		}
	}

	/**小圆点 end*/

	.tui-content-out {
		position: absolute;
		width: 186rpx;
		height: 186rpx;
		background-color: #da3b24;
		border-radius: 8rpx;
	}

	/* 580 530  */

	.tui-award-1 {
		left: 24upx;
		top: 24upx;
	}

	.tui-award-2 {
		left: 228upx;
		top: 24upx;
	}

	.tui-award-3 {
		left: 436upx;
		top: 24upx;
	}

	.tui-award-4 {
		left: 436upx;
		top: 222upx;
	}

	.tui-award-5 {
		left: 436upx;
		top: 420upx;
	}

	.tui-award-6 {
		left: 228upx;
		top: 420upx;
	}

	.tui-award-7 {
		left: 24upx;
		top: 420upx;
	}

	.tui-award-8 {
		left: 24upx;
		top: 222upx;
	}

	/**居中 加粗*/

	.tui-btn-start {
		position: absolute;
		top: 222upx;
		left: 228upx;
		height: 186rpx;
		width: 186rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/integral-btn.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tui-btn-start text {
		/* text-shadow: 1px 1px 1px #da3b24; */
		font-size: 24rpx;
		color: #da3b24;
		letter-spacing: 1rpx;
		text-shadow: 0 -1px 1px #fcf5c8,
			0 1px 1px rgba(96, 58, 13, .35);
		font-weight: bold;
	}

	.tui-btn-start image {
		width: 104rpx;
		height: 48rpx;
		margin-top: 15rpx
	}

	.tui-ative {
		opacity: 0.6 !important;
	}

	.tui-award-image {
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 134upx;
		width: 134upx;
	}

	.tui-content-out-item {
		width: 186rpx;
		height: 176rpx;
		background-color: #ffedd2;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tui-content-out-item image {
		width: 78rpx;
		height: 100rpx;
		margin-bottom: 8rpx;
	}

	.tui-content-out-item text {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #da3b24;
	}

	.tui-awardSelect {
		background-color: #f25c46 !important;
	}

	.tui-awardSelect-item {
		background-color: #fff !important;
		box-shadow: 0 0 20px #fff !important;
	}
</style>
